<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>主页</el-breadcrumb-item>
      <el-breadcrumb-item>Dashboard</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, i) in sysInfo" :key="i">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ item.title }}</span>
          </div>
          <div>
            <h1>{{ item.num }}</h1>
            {{ item.subTitle }}
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="box-card" style="margin-top: 10px">
      <div id="areaYN" style="width: 100%; height: 800px"></div>
    </el-card>
  </div>
</template>



<script>
import echarts from 'echarts'

import '../../../node_modules/echarts/map/js/province/yunnan.js'

export default {
  data() {
    return {
      sysInfo: [],
    }
  },
  created() {
    this.getSysInfo()
  },
  mounted() {
    this.areaYN()
  },
  methods: {
    async getSysInfo() {
      await this.$http
        .get('/sysInfo')
        .then((res) => {
          res = res.data
          if (res.code != 1) {
            return this.$message.error(res.msg || window.defineGlobalConstData.getError)
          }
          this.sysInfo = res.data
        })
        .catch((err) => {
          return this.$message.error(err.msg)
        })
    },
    areaYN() {
      var myChart = echarts.init(document.getElementById('areaYN'))

      const optionsAreaYN = {
        // 图表主标题
        title: {
          // 文本
          text: '云南',
          // 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
          top: 25,
          // 值: 'left', 'center', 'right' 同上
          left: 'center',
          // 文本样式
          textStyle: {
            // 字体大小
            fontSize: 25,
            // 字体粗细
            fontWeight: 650,
            // 字体颜色
            color: '#000000',
          },
        },
        // 提示框组件
        tooltip: {
          // 触发类型, 数据项图形触发
          trigger: 'item',
          // 使用函数模板，传入的数据值 ——> value: number | Array
          formatter: (val) => {
            return val.data.name + '<br>人口数量: ' + val.data.value + '万'
          },
        },
        // 视觉映射组件
        visualMap: {
          // continuous 类型为连续型
          // type: 'continuous',
          show: true, // 是否显示 visualMap-continuous 组件 如果设置为 false，不会显示，但是数据映射的功能还存在
          // 指定 visualMapContinuous 组件的允许的最小/大值 min/max 必须用户指定
          min: 20,
          // min,max 形成了视觉映射的定义域
          max: 700,
          // 文本样式
          textStyle: {
            // 字体大小
            fontSize: 15,
            // 字体颜色
            color: '#000',
          },
          // 拖拽时，是否实时更新
          realtime: false,
          // 是否显示拖拽用的手柄
          calculable: true,
          // 定义在选中范围中的视觉元素
          inRange: {
            // 图元的颜色
            color: ['#F56C6C', '#E6A23C', '#F540FF', '#67C23A', '#E3EE0E', '#057DF9'].reverse(),
          },
        },
        series: [
          {
            // 类型
            type: 'map',
            // 系列名称，用于tooltip的显示，legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
            map: '云南',
            // 地图类型
            mapType: 'province',
            // 是否开启鼠标缩放和平移漫游 默认不开启
            // 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move' 设置成 true 为都开启
            roam: false,
            // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
            top: 70,
            // 图形上的文本标签
            label: {
              show: false, // 是否显示对应地名
            },
            // 地图区域的多边形 图形样式
            itemStyle: {
              // 地图区域的颜色 如果设置了visualMap, 这个属性将不起作用
              areaColor: '#7B68EE',
              // 描边线宽 为 0 时无描边
              borderWidth: 0.5,
              // 图形的描边颜色 支持的颜色格式同 color
              borderColor: '#000',
              // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
              borderType: 'dashed',
            },
            // 高亮状态
            emphasis: {
              // 文本标签
              label: {
                // 是否显示标签
                show: true,
                // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
                color: '#000',
              },
              // 图形样式
              itemStyle: {
                // 地图区域的颜色
                areaColor: '#FF6347',
              },
            },
            // 地图系列中的数据内容数组，数组项可以为单个数值
            data: [
              { name: '昆明市', value: 667 },
              { name: '曲靖市', value: 604.2 },
              { name: '玉溪市', value: 236 },
              { name: '昭通市', value: 542.4 },
              { name: '保山市', value: 257.8 },
              { name: '丽江市', value: 127.9 },
              { name: '普洱市', value: 260.2 },
              { name: '临沧市', value: 250.7 },
              { name: '德宏傣族景颇族自治州', value: 127.7 },
              { name: '怒江傈僳族自治州', value: 54.1 },
              { name: '迪庆藏族自治州', value: 40.7 },
              { name: '大理白族自治州', value: 354 },
              { name: '楚雄彝族自治州', value: 273 },
              { name: '红河哈尼族彝族自治州', value: 464.5 },
              { name: '文山壮族苗族自治州', value: 360.3 },
              { name: '西双版纳傣族自治州', value: 116.3 },
            ],
          },
        ],
      }

      myChart.setOption(optionsAreaYN)
    },
  },
  computed: {},
}
</script>

<style lang="scss" scoped>
</style>